<template>
  <div class="container">
    <div class="search-container">
      <el-card shadow="never">
        <!-- 搜索功能 -->
        <el-row class="demo-autocomplete">
          <el-col class="search">
            <span class="sub-title">学科名称</span>
            <el-input v-model="queryText" class="inputSearch"></el-input>
          </el-col>
          <!-- 按钮 -->
          <el-button size="small" class="clear">清除</el-button>
          <el-button size="small" type="primary">搜索</el-button>
          <el-button
            size="small"
            class="increase"
            type="success"
            icon="el-icon-edit"
            >新增学科</el-button
          >
          <!-- 按钮 -->
        </el-row>
        <!-- 搜索功能 -->

        <el-alert title="消息提示的文案" type="info" show-icon> </el-alert>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'subjects',
  data () {
    return {
      queryText: ''
    }
  }
}
</script>

<style scoped>
.container .search-container .demo-autocomplete .sub-title {
  margin-left: 15px;
}

.container .search-container .demo-autocomplete .inline-input {
  margin-left: 20px;
}
.container .search-container .demo-autocomplete .el-col-12 {
  width: 26%;
}

.container .search-container .demo-autocomplete .clear {
  right: 0;
}

.container .search-container .demo-autocomplete .increase {
  float: right;
}
.search {
  width: 280px;
}
.inputSearch {
  width: 173px;
  height: 32px;
  margin: 0 10px;
}
</style>
